<template>
	<div class="presell-detail" v-if="data">
		<div class="commodity-banner">
			<div class="title-btn layout pt20rem pb20rem" v-show="scrollTop < 100">
				<i class="iconfont icon-zuojiantouyuanxing ml30rem" style="color:#bfbfbf" @click="$router.replace('/ordering')"></i>
				<div class="mr30rem">
					<!-- <i class="iconfont icon-1016fenxiangyuanxing"></i> -->
					<i class="iconfont icon-gengduo1"  style="color:#bfbfbf"  @click="sheetVisible = true"></i>
				</div>
			</div>
			<section class="">
				<swiper :data="banner" :options="bannerOptions" img-key="pic_cover_big">
				</swiper>
			</section>
			<div class="title-con layout pl30rem pr30rem">
				<div class="con-left layout">
					<div class="mr20rem">
						<strong class="bg-white cred fs24rem pl5rem pr5rem pt5rem pb5rem circle-8">限时预售</strong>
						<p class="fs34rem white mt10rem">定金￥</p>
					</div>
					<span class="fs70rem white flex-end bold">{{ data.earnest }}</span>
				</div> 
				<div class="con-right align-center" v-if="data.count_down > 0">
					<p class="fs28rem white mb10rem">距预售结束</p>
					<countdown :data="data.count_down" :type="countdownType"></countdown>
				</div>
			</div>
		</div>
	 	<section class="pl30rem pr30rem pt25rem pb25rem border-b20 price-box">
	 		<p class="fs32rem c333 bold ellipsis-more">{{ data.goods_name }}</p>
	 		<div class="layout-juscon mt35rem">
				<div class="price">
					<p class="fs40rem red">￥{{ data.price }} <i>预售价</i></p>
					<del class="fs26rem c999">原价￥{{ data.market_price }}</del>
				</div>
				<span class="fs26rem c666 flex-end">已预售:{{ data.yg_num }}人</span>
	 		</div>
	 	</section>
		<section class="pl30rem pr30rem border-b20">
 			<div class="rating-title layout" @click="popupVisible = true">
	 			<h3 class="fs30rem c333" v-if="selectString">已选</h3>
	 			<h3 class="fs30rem c333" v-else>选择颜色分类尺寸</h3>
	 			<div>
	 				<span class="fs30rem c333" v-if="selectString">{{ selectString }}</span>
	 				<i class="iconfont icon-right2"></i>
	 			</div>
	 		</div>
		</section>
		<section  class="rating pl30rem pr30rem border-b20" v-if="starData.length > 0">
	 		<router-link tag="div" :to="'/rating/comment?id='+ goods_id" class="rating-title layout border-b">
	 			<h3 class="fs32rem bold c333">体验评星</h3>
	 			<i class="iconfont icon-right2"></i> 
	 		</router-link>
	 		<div class="rating-son pt20rem pb20rem">
				<div class="flex-left pt10rem pb10rem" v-for="item in starData">
					<span class="fs30rem c333 mr10rem">{{ item.name }}:</span>
	 				<i class="iconfont icon-xingxing ml15rem orange" v-if="item.score" v-for = "i in Math.floor(item.score)"></i>
				</div>
	 		</div>
	 	</section>
	 	<router-link tag="section" :to="'/shop/' + data.shop_id" class="describe pl30rem pr30rem border-b20">
			<div class="describe-title flex-left flex-center pt40rem pb40rem">
				<span class="fs32rem c666 mr15rem">{{ data.shop_name }}</span>
				<div class="star mr30rem layout">
					<i class="iconfont icon-xingxing ml15rem orange" v-for = "i in Math.floor(data.shop_credit)"></i>
					<i class="hollow-star ml15rem" v-for = "i in 5 - Math.floor(data.shop_credit)"></i>
				</div>
				<i class="iconfont icon-right2 flex-center"></i>
			</div>
			<div class="pb60rem layout">
				<span class="fs26rem c666">描述相符:{{ data.shop_desccredit }}</span>
				<span class="fs26rem c666">服务态度:{{ data.shop_servicecredit }}</span>
				<span class="fs26rem c666">发货速度:{{ data.shop_deliverycredit }}</span>
			</div>
		</router-link>
		<goods-detail :data="data" v-if="data.rules"></goods-detail>
		<footer class="commodity-footer bg-white layout border-t align-center" v-show=" showApp !=1 ">
			<router-link tag="span" :to="'/ordering/detail/Ordering-nav/19?type=2'" class="w50 fs24rem c666 pl15rem pr15rem border-r">更多新品</router-link>
			<span class="btn-text w50 fs24rem c666 pl15rem pr15rem" :class="{ onAttention:isAttention }" @click="attention">关注</span>
		</footer>
		<!-- 选择颜色分类尺寸 -->
		<popup v-model="popupVisible" position="bottom" class="w100">
			<div class="pl30rem pr30rem pb20rem">
				<div class="shop flex-left pt30rem pb30rem border-b">
					<img :src="specificationImg"  alt="">
					<div class="shop-text ml30rem">
						<p class="fs28rem c333 mb20rem bold">{{ data.goods_name }}</p>
						<span class="fs28rem c999"v-if="stock">库存:{{ stock }}</span>	
						<span class="fs28rem c999"v-else>库存:{{ data.stock }}</span>	
						<span class="block fs28rem c999 mb25rem" v-if="selectString <= 1">请选择规格数量</span>
						<span class="block fs28rem c999 mb25rem" v-else>规格：{{ selectString }}</span>
						<strong class="fs30rem red" v-if="price">￥{{ price }}</strong>
						<strong class="fs30rem red" v-else>￥{{ data.price }}</strong>
					</div>
				</div>
				<div class="couponList">
					<div class="specification" v-if="data.spec_list">
						<div v-for="(item,n) in data.spec_list">
							<h3 class="pt15rem pb15rem fs30rem c333">{{ item.spec_name}}</h3>
							<ul class="flex-left pt15rem pb15rem border-b">
								<li class="fs28rem c333 border circle-8 pt15rem pb15rem pl25rem pr25rem mr15rem" :class="{ on : subIndex[n] == index }" v-for="(items,index) in item.value" @click="selectCate(items,n,index)">{{ items.spec_value_name }}
								</li>
							</ul>
						</div>
					</div>
					<div class="mt30rem mb30rem">
						<h3 class="pt15rem pb15rem fs30rem c333">数量</h3>
						<div class="layout quantity">
							<i class="iconfont icon-jian1" v-if="quantity == 1"></i>
							<i class="iconfont icon-jian1" @click="quantity--" v-else></i>
							<input type="text" v-model="quantity">
							<i class="iconfont icon-jia1" @click="quantity++"></i>
						</div>
					</div>
					<button class="btn w100 align-center block cxo-red fs34rem white circle-8" @click="ascertain()">确定</button>
				</div>
			</div>
		</popup>
		<actionsheet :actions="actions" v-model="sheetVisible"></actionsheet>
	</div>
</template>

<script>
	import { getRules } from '@/api/rules';
	import { getYGDetail, getCommentsCount, getGoodsComments, joinList } from '@/api/goods-detail';
	import { addAttention, delAttention, isAttention, addCart } from "@/api/shopping-cart";
	import { getStar } from "@/api/rating";
	import Swiper from "@/components/Swiper";
	import GoodsDetail from '@/components/Goods-detail';
	import Countdown from "@/components/Countdown";
	import { formatDate } from '@/utils';
	import { Popup,Actionsheet } from 'mint-ui';
	import $toast from '@/utils/toast';

 	export default{
		components:{
			Swiper,
			GoodsDetail,
			Countdown,
			Popup,
			Actionsheet
		},
		mounted()
		{
			window.addEventListener('scroll', this.handleScroll)
		},
		filters: {
			formatDate(time,fmt){
				let date = new Date(time);
				return formatDate(date,fmt);
			}
	  	},
		data()
		{
			return{
				groupShow        : false,
				popupVisible     : false,
				data             : null,
				countdownType    : true,
				sheetVisible  	 : false,
				actions       	 : [{name:'投诉该商品',method : this.complaint}],
				uid              : window.localStorage.getItem('uid'),
				goods_id         : this.$route.params.id,
				showApp          : window.sessionStorage.getItem('isapp'),
				scrollTop        : '',
				isAttention      : '',
				selectString     : '',
				price            : '',
				stock            : '',
				specificationImg : '',
				sku_id           : '',
				price            : '',
				parameterName    : '',
				coupon_id        : '',
				fuid             : '',
				selectString	 : '',
				selectArr        : [],
				subIndex	     : [],
				banner           : [],
				starData         : null,
				commentsData     : null,
				jionListData     : [],
				wechatConfig     : [],
				canselect        : [],
				comments_type    : 0,
				quantity         : 1,
				view             : 1,
				img_url          : process.env.IMG_URL,
				shareShow        : false,
				bannerOptions : {
					slidesPerView : 'auto',
					loopedSlides  : 'auto',
					autoplay: {
						delay: 5000,
					},
				}
			}
		},
		created()
		{
    		window.scrollTo(0,0);  
    		this.loadData();
		},
		watch:
		{
			selectString(newVal)
			{
				this.canselect = this.data.sku_list.filter(res => res.sku_name.indexOf(newVal)>-1);
				if(this.canselect.length == 1)
				{
					this.price = this.canselect[0].price;
					this.stock = this.canselect[0].stock;
					this.sku_id = this.canselect[0].sku_id;
				}
				else
				{
					this.price = '';
					this.stock = '';
					this.sku_id = '';
				}
			}
		},
		methods:
		{
			// 页面置顶
			handleScroll () {
			  this.scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
			},
			loadData()
			{
	    		this.loadDetailData();
				this.loadStar();
	    		this.loadComments();
	    		this.judgeAttention();
	    		this.loadJoinList();
			},
			loadDetailData()
			{
				var params = {
					goods_id : this.goods_id, 
					uid      : this.uid 
				}
				getYGDetail(params).then( res => {
					this.banner = res.data.img_list;
					this.specificationImg = this.img_url + res.data.img_list[0].pic_cover_small;
					this.coupon_id = res.data.coupon_id;
					this.data = res.data;
				})
			},
			loadStar()
			{
				getStar(this.goods_id , '0').then( res => {
					this.starData = res.data;
				})
			},
			loadComments()
			{
				getCommentsCount(this.goods_id).then( res => {
					this.commentsData = res.data;
				})
			},
			loadJoinList()
			{
				var params = {
					uid        : this.uid,
					goods_id   : this.goods_id,
					page_index : 1,
					page_size  : 2,
				}
				joinList(params).then( res=> {
					this.jionListData = res.data;
				})
			},

			judgeAttention()
			{
				if(!this.uid)
					return;
				
				var params = {
					fav_id   : this.goods_id,
					fav_type : 'goods',
					uid      : this.uid
				}
				isAttention(params).then( res => {
					if(res.data == 1){
						this.isAttention = true;
					}
					if(res.data == 0){
						this.isAttention = false;
					}
				})
			},
			attention()
			{
				var params = {
					fav_id : this.goods_id,
					fav_type: 'goods',
					uid : window.localStorage.getItem('uid')
				}
				if(this.isAttention){
					delAttention(params).then( res => {
						this.isAttention = false;
					})
				}
				else
				{
					addAttention(params).then( res => {
						this.isAttention = true;
					})
				}
			},
			// 规格选中
			selectCate(item,n,index)
			{ 

				if (this.selectArr[n] != item.spec_value_name) 
				{
	                this.selectArr[n] = item.spec_value_name;
	                this.subIndex[n] = index;
	            }
	            else
	            {
	                this.selectArr[n] = "";
	                this.subIndex[n] = -1; //去掉选中的颜色 
            	}
				this.$forceUpdate();
				this.selectString = this.selectArr.join(' '); 
				if(item.spec_img)
					this.specificationImg = this.img_url + item.spec_img;
			},
			//判断规格，库存。
			ascertain()
			{
				if(this.data.spec_list.length > 0 && this.data.stock > 0 )
				{
					if(this.canselect.length != 1)
						return $toast('请选择规格数量');

					if(this.parameterName == 'add')
						return this.add();

					if(this.parameterName == 'pay')
						return this.pay();

					if(this.parameterName == 'coupon')
						return this.couponPay();

					if(this.parameterName == 'offered')
						return this.offered();

					return this.popupVisible = false;
				}
				else
				{
					if(this.data.stock > 0){
						this.sku_id = this.data.sku_list[0].sku_id;
					}
					else
					{
						this.popupVisible = false;
						return $toast('库存不足');
					}


					if(this.parameterName == 'add')
						return this.add();

					if(this.parameterName == 'pay')
						return this.pay();

					if(this.parameterName == 'coupon')
						return this.couponPay();

					if(this.parameterName == 'offered')
						return this.offered();

					return this.popupVisible = false;
				}
			},
			//使用优惠券
			couponPay()
			{

				this.parameterName = 'coupon';

				if(!this.sku_id)
				{
					return this.popupVisible = true;
				}
				else
				{
					var skuList = this.sku_id+':'+this.quantity
					this.$store.dispatch("skuidList", skuList);
					this.$router.push('/shopping/pay?type=2&coupon_id=' + this.coupon_id)
				}
			},
			// 参团支付
			offered(item)
			{
				if(item)
				{
					this.coupon_id = item.coupon_id;
					this.fuid = item.uid;
					this.parameterName = 'offered';
				}

				if(!this.sku_id)
				{
					return this.popupVisible = true;
				}
				else
				{
					var skuList = this.sku_id+':'+this.quantity
					this.$store.dispatch("skuidList", skuList);
					this.$router.replace('/shopping/pay?type=2&coupon_id=' + this.coupon_id + '&fuid=' + this.fuid)
				}
			},
			offeredMore()
			{
				this.$store.dispatch('commodity',this.data)
				this.$router.push('/ordering/detail/group?goods_id='+ this.goods_id)
			},
			showView(num)
			{
				this.view = num;
			},
			loadInitData(num)
			{
				this.comments_type = num;
				this.page_index = 1;
				this.loadData();
			},
			complaint()
			{
				this.$router.push('/complaint?goods_id=' + this.goods_id);
			}
		}
	}
</script>

<style lang="less">
	.presell-detail{
		.commodity-header{
			height: 90/28rem;
			line-height: 90/28rem;
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 999;
			span{
				width: 33.333%;
			}
			.select{
				position: relative;
			}
			.select:before{
				content:'';
				display: block;
				width: 40%;
				height: 3/28rem;
				background-color: white;
				position: absolute;
				left: 50%;
				bottom: 10%;
				transform: translate(-50%,50%);
			}
		}
		.commodity-banner{
			position: relative;
			.title-btn{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				z-index: 9;
				i{
					font-size: 60/28rem;
				}
			}
			.title-con{
				position: absolute;
				bottom: 0;
				left: 0;
				width: 92%;
				z-index: 9;
				background-color: rgba(255,0,0,.8);
				height: 108/28rem;
				.con-right{
					.count-down{
						.day{
							color: #fff;
						}
						span{
						    background-color: #fff;
						    color: #ff0000;
						}
						strong{
							i{
								background-color: #fff;
							}
						}
					}
				}
			}
		}
		.price-box
		{
			.price
			{
				p
				{
					i
					{
						color: #ff0036;
						font-size: 1rem;
						background: #ffdee5;
						vertical-align: super;
						display: inline-block;
						padding-left: 5px;
						padding-right: 5px;
						border-radius: 2px;
					}
				}
			}
		}
		.experience
		{
			border-bottom: 20/28rem solid #f5f5f5;
		}
		.partner
		{
			border-bottom: 20/28rem solid #f5f5f5;
			ul
			{
				li
				{
					&:last-child
					{
						border-bottom:initial;
					}
					img
					{
						width: 100/28rem;
						height: 100/28rem;
						border-radius: 50%;
						object-fit: cover;
					}
					.list-right
					{
						button
						{
							width: 200/28rem;
							padding-top: 10/28rem;
							padding-bottom: 10/28rem;
							border-radius: 8px;
						}
					}
				}
			}
		}
		.coupon
		{
			border-bottom: 20/28rem solid #f5f5f5;

			.coupon-list
			{
				background: url("../../../assets/coupon.png") no-repeat center center /100%;
				height: 205/28rem;
				width: 100%;
			    align-items: center;
			    -webkit-align-items: center;
			    align-self: center;
			    -webkit-align-self: center;
				.coupon-left
				{
					span
					{
						display: block;
					}
				}
				.coupon-mid
				{
					p
					{
						color: rgba(255,255,255,.6);
					}
					span
					{
						color: rgba(255,255,255,.8);
						display: block;
					}
				}
				.coupon-right
				{
					writing-mode: tb-lr;
					writing-mode: vertical-lr;
				}
			}
		}
		.ellipsis-more{
			/*min-height: 3.5rem;*/
			text-overflow: ellipsis;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            display: -webkit-box;
            overflow: hidden;
		}
		.rating-title{
			height: 90/28rem;
			line-height: 90/28rem;
		}
		.get-coupon{
			p{
				height: 90/28rem;
				line-height: 90/28rem;
			}
		}
		.comment{
			button{
				border-color: #a3a3a3;
				width: 30%;
				height: 60/28rem;
				line-height: 60/28rem;
			}
			.is-on{
				border: 1px solid transparent;
				background-color: #ff0036;
				color: #fff;
			}
		}
		.comment-btn{
			width: 210/28rem;
			height: 70/28rem;
			text-align: center;
			border-radius: 8/28rem;
			border-color: #999;
		}
		.comment-btn-select{
			background-color: #ff0036;
			color: #fff;
			border:1px solid transparent;
		}
		.commodity-footer{
			height:100/28rem;
			line-height: 100/28rem; 
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			overflow: hidden;
			span{
				padding-top: 50/28rem;
				background-position: center 30%;
		        background-size: 44/28rem;
		        background-repeat: no-repeat;
	        	&:nth-child(1){
					background-image: url(../../../assets/index.png)
				}
				&:nth-child(2){
					background-image: url(../../../assets/icon3.png)
				}
			}
			.onAttention{
				&:nth-child(2){
					background-image: url(../../../assets/details_star_img.png)
				}
			}
		}

		.mint-popup{
			.shop{
				img{
					width: 200/28rem;
					height: 160/28rem;
					object-fit: cover;
				}
			}
			.specification{
				ul{
					li{
						border-color:#666;
					}
					.on{
						border-color: transparent;
						background-color: #ff0036;
						color: #fff;
					}
				}
			}
			.quantity{
				width: 200/28rem;
			}
			button{
				height: 90/28rem;
				line-height: 90/28rem;
			}
		}
		.goods-detail{
			height: 90/28rem;
			line-height: 90/28rem;
			.select-color{
				font-weight: 600;
				color: #333;
				position: relative;
			}
			.select-color:after{
				content: "";
				display: block;
				background-color: #ff0036;
				height: 6/28rem;
				width: 100%;
				position: absolute;
				bottom: -0;
				left: 0;
			}
		}
		.mint-toast{
			z-index: 9999;
		}
		
	}
</style>